<template>
  <div class="container">
    <a class="btn btn-primary" @click.stop.prevent="list">获取所有用户</a>
    &nbsp;
    <a class="btn btn-primary" @click.stop.prevent="find">获取1号用户</a>
    &nbsp;
    <a class="btn btn-primary" @click.stop.prevent="all">并发</a>
    <div v-if="customer" class="row border">
      <span class="col-3">{{customer.id}}</span>
      <span class="col-3">{{customer.name}}</span>
      <span class="col-3">{{customer.gender}}</span>
      <span class="col-3">{{customer.birthdate}}</span>
    </div>
    <hr>
    <div v-for="(c,i) in customers" :key="c.id" class="row border">
      <span class="col-1">{{i+1}}</span>
      <span class="col-3">{{c.name}}</span>
      <span class="col-3">{{c.gender}}</span>
      <span class="col-3">{{c.birthdate}}</span>
      <span class="col-2">
        <a @click.stop.prevent="remove(c.id)">删除</a>
      </span>
    </div>
    <hr>
    <div v-for="(s,i) in students" :key="s.id" class="row border">
      <span class="col-1">{{i+1}}</span>
      <span class="col-11">{{s.name}}</span>
    </div>

</div>
</template>

<script>
  export default {
  name: 'App',
  data(){
    return { customer : null , customers: null , students: null}
  },
  methods: {
    list(){
      /*
      this.axios.get( '/api/customer/list' ).then( resp => {
        this.customers = resp.data ;
      }) .catch( error => {
        console.log( error );
      });
      */
      let instance = this.axios.create();
      instance.interceptors.request.use(
          config => { console.log(config.url) ; return config ; } ,
          error => { console.log(error) ; return Promise.reject(error) ;}
      );
      instance.get('/api/customer/list' ).then( resp => {
        this.customers = resp.data ;
      }) .catch( error => {
        console.log( error );
      });
    },
    find(){
      this.axios.get( '/api/customer' , { params: { id: 1 } } )
          .then( response => {
            console.log( '响应数据:' , response );
            this.customer = { ...response.data } ;
          }).catch( error => {
            console.log( error );
          });
    },
    remove(id){
      this.axios.delete( '/api/customer' , { params: { id: id } } )
          .then( () => {
            this.list();
          }).catch( error => {
            console.log( error );
          });
    },
    all(){
      Promise.all([
          this.axios.get( '/api/customer/list' ),
          this.axios.get( '/api/student/list' )
      ]).then( results => {
        console.log( results );
        let firstResponse = results[0] ;
        let secondResponse = results[1] ;
        this.customers = firstResponse.data;
        this.students = secondResponse.data;
      }).catch( error => {
        console.log( error );
      })
    }
  }
}
</script>

<style>
</style>
